<template>
	<view>
		<view class="like"
			v-if="showWay == 2">
			<image v-if="computedNoneImg"
				style="width: 100%;height:340rpx"
				mode="aspectFill"
				@click='goDetails(item.commodityId)'
				:src="item.picture ? uploadImgUrl + item.picture : updateMorentu"></image>
			<view class="pd10"
				style="padding-top:0">
				<view class="like_title mtb10 texttowShow"
				@click='goDetails(item.commodityId)'
					style="margin-top:0">{{item.name ? item.name : ''}}</view>
				<view class="like_cangku">
					<text v-if="computedFencang"
						class=" ">仓库：{{updateWarehouse}}</text>
					<!-- <text v-if="item.stockMark == 2"
						class="mt10">库存:{{item.defaultSKU && item.defaultSKU.stockNum ? Utils.formatToFixed(item.defaultSKU.stockNum,'number')  : 0}}</text>
					<text v-if="item.stockMark == 3"
						class="mt10">库存:{{item.defaultSKU && item.defaultSKU.stockNum  && item.defaultSKU.stockNum > 0 ? '有'  : '无'}}</text> -->
					<text v-if="item.stockMark == 2"
						class="mt10">库存:{{item.totalStockNum ? Utils.formatToFixed(item.totalStockNum,'number')  : 0}}</text>
					<text v-if="item.stockMark == 3"
						class="mt10">库存:{{item.totalStockNum && item.totalStockNum > 0 ? '有'  : '无'}}</text>
				</view>
				<view class="like_btn ">
					<text class="like_price ">
						￥{{
							item.defaultSKU &&
							item.defaultSKU.priceTrackingInfo &&
							item.defaultSKU.priceTrackingInfo.price ?
							item.defaultSKU.priceTrackingInfo.price :
							item.defaultSKU && 
							item.defaultSKU.skuPriceInfo &&
							item.defaultSKU.skuPriceInfo.length &&
							item.defaultSKU.skuPriceInfo[0].price ?
							Utils.formatToFixed(item.defaultSKU.skuPriceInfo[0].price,'price')
							: 0}}

						<text class="like_unit">/
							<!-- {{
							item.defaultSKU &&
							item.defaultSKU.unitInfo && 
							item.defaultSKU.unitInfo.name &&
							item.defaultSKU.specsOptionInfo && 
							item.defaultSKU.specsOptionInfo.length ? 
							item.defaultSKU.unitInfo.name + '/' + 
							item.defaultSKU.specsOptionInfo.map(it=>it.optionName).join('-') :
							item.defaultSKU.unitInfo.name}} -->

							{{
						item.defaultSKU && 
						item.defaultSKU.unitInfo && 
						item.defaultSKU.unitInfo.name ? 
						item.defaultSKU.unitInfo.name : ''}}
						</text></text>
					<!-- <text class="like_yishou ">已售:{{item.oldprice}}</text> -->
					<view class="gwc">
						<image :src="xcxImgUrl && xcxImgUrl+'gouwuche.svg'"
							@click.stop="openPopup(item)"
							
							style="width: 44rpx;height: 44rpx;">
						</image>
						<view class="jiaobiao" v-if="item.totalCarQty">
							
							{{computedCarNum ? computedCarNum+item.totalCarQty : item.totalCarQty > 0 ? item.totalCarQty : ''}}
						</view>
						{{computedCarNum}}
					</view>
					
				</view>
			</view>
		</view>
		<view class="one_like pd5"
		   style=" margin-bottom: 12rpx" 
			v-if="showWay == 1">
			<view v-if="computedNoneImg"
				class="one_like_leftImg">
				<image style="width: 100%;height: 100%;border-radius: 20rpx;"
					mode="aspectFill"
					@click='goDetails(item.commodityId)'
					:src="item.picture ? uploadImgUrl + item.picture : updateMorentu"></image>
			</view>
			<view class="pd10 one_like_right"
				style="padding-top:0;padding-bottom:0">
				<view class="like_title mtb10 texttowShow" @click='goDetails(item.commodityId)'  style="margin-top:0">{{item.name ? item.name : ''}}</view>
				<view class="like_cangku mtb10"
					style="margin-top:0;">
					<text class="">仓库：{{updateWarehouse}}</text>
					<text v-if="item.stockMark == 2"
						style="margin-left: 20rpx;">库存:{{item.totalStockNum ? Utils.formatToFixed(item.totalStockNum,'number') : 0}}</text>
					<text v-if="item.stockMark == 3"
						style="margin-left: 20rpx;">库存:{{item.totalStockNum && item.totalStockNum > 0 ? '有'  : '无'}}</text>
				</view>
				<view class="like_btn pd5 ">
					<text class="like_price ">￥{{item.defaultSKU &&
							item.defaultSKU.priceTrackingInfo &&
							item.defaultSKU.priceTrackingInfo.price ?
							item.defaultSKU.priceTrackingInfo.price :
							item.defaultSKU && 
							item.defaultSKU.skuPriceInfo &&
							item.defaultSKU.skuPriceInfo.length &&
							item.defaultSKU.skuPriceInfo[0].price ?
							Utils.formatToFixed(item.defaultSKU.skuPriceInfo[0].price,'price')
							: 0}}
						<text class="like_unit">/
							<!-- {{
								item.defaultSKU &&
								item.defaultSKU.unitInfo && 
								item.defaultSKU.unitInfo.name &&
								item.defaultSKU.specsOptionInfo && 
								item.defaultSKU.specsOptionInfo.length ? 
								item.defaultSKU.unitInfo.name + '/' + 
								item.defaultSKU.specsOptionInfo.map(it=>it.optionName).join('-') :
								item.defaultSKU.unitInfo.name }} -->

							{{
								item.defaultSKU && 
								item.defaultSKU.unitInfo && 
								item.defaultSKU.unitInfo.name ? 
								item.defaultSKU.unitInfo.name : ''}}
						</text></text>
					<!-- <text class="like_yishou ">已售:{{item.oldprice}}</text> -->
					<!-- <image :src="xcxImgUrl && xcxImgUrl+'gouwuche.svg'"
						@click.stop="openPopup(item)"
						style="width: 44rpx;height: 44rpx;">
					</image> -->
					
					<view class="gwc">
						<image :src="xcxImgUrl && xcxImgUrl+'gouwuche.svg'"
							@click.stop="openPopup(item)"
							
							style="width: 44rpx;height: 44rpx;">
						</image>
						<view class="jiaobiao" v-if="item.totalCarQty">
							
							{{computedCarNum ? computedCarNum+item.totalCarQty : item.totalCarQty > 0 ? item.totalCarQty : ''}}
						</view>
						{{computedCarNum}}
						
					</view>
				</view>
			</view>
		</view>

		<!-- 添加购物车弹出层 -->
		<addCardPopup :commonityItem='commonityItem'
			ref="addCardPopup"
			@keep="keep"
			:updateNoneImg="computedNoneImg"
			@publish="publish"></addCardPopup>

		<!-- 绑定手机号弹出层 -->
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow'
			@close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave'
			v-if="bindingPhoneNumberShow"></bindingPhoneNumber>
	</view>

</template>

<script>
	import {
		uploadImgUrl
	} from "@/utils/request.js"
	import newBtn from '@/components/newBtn/newBtn.vue'
	import addCardPopup from '@/components/addCardPopup/addCardPopup.vue'
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import {
		addMallShoppingCart,
		getCurrentMallMember,
		getCatCount
	} from '@/api/global.js'
	export default {
		name: "guessWhatYouLike",
		props: {
			//展示商品项
			item: {
				type: Object,
				default: () => {}
			},
			// 展示方式 1.单排 2.双排
			showWay: {
				type: Number,
				default: 2
			}

		},
		components: {
			newBtn,
			addCardPopup,
			bindingPhoneNumber

		},
		inject: ['resetList'],
		computed: {
				
			computedCarNum(){
				return this.$store.state.catNum
			},
			//返回默认图 兼容小程序 直接在html写vuex不生效
			updateMorentu() {
				return this.$store.state.morentu
			},

			//返回仓库 兼容小程序 直接在html写vuex不生效
			updateWarehouse() {
				return this.$store?.state?.warehouseInfo?.warehouseName || ''
			},
			//有图无图模式
			computedNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
			//是否开启分仓模式
			computedFencang() {
				return this.$store?.state?.configSetting?.fencang == 1 ? true : false
			},
				
		},
	
		data() {
			return {
				uploadImgUrl, //共共图片前缀
				// showPopup:false,//购物车选择列表
				// value:1
				bindingPhoneNumberShow: false, //绑定手机号弹出层
				commonityItem: {}, //点击购物车保存的当前对象 传到子组件
			};
		},
        // onHide() {
        // 	this.$refs.addCardPopup.showPopup = false
        // },
		methods: {	
			goDetails(id){
				console.log(111111);
				uni.navigateTo({
					url:`/page_public/commodityDetail?commodityId=${id}`
				})
			},
			closePop(){
				this.$refs.addCardPopup.showPopup = false
				uni.showTabBar({});
			},
			publish() {
				this.$emit('publish');
			},
				
			keep(e){
				console.log(e);
			},
			//点击购物车弹出选择商品自由项弹出层
			async openPopup(item) {
				
				//首先判断是否是游客 如果是游客 弹出绑定手机号弹窗
				let res = await getCurrentMallMember()
				if (res.data?.info?.status == 1) { //游客

					// return
					this.bindingPhoneNumberShow = true

				} else if (item.skuInfo && item.skuInfo.length > 1) {

					//如果是多单位 或者 多单位且一个自由项
					if ((item.isUnits == 1 && item.isSpecs == 2) || (item.isUnits == 1 && item.isSpecs == 1)) {
						//循环sku 比对销售默认单位 没有就取第一个
						item.skuInfo.forEach((it, index) => {
							if (it.unitInfo.name == item.defaultSKU.unitInfo.name) {
								//赋值对应下标
								this.$refs.addCardPopup.unitsActive = index
								//保存默认单位的sku信息 关闭选项卡是重新赋值
								this.$store.commit('updateSkuInfo', item.defaultSKU)


							}
						})

					}

					//如果是多自由项商品 先处理数据格式 方便弹窗内展示
					if (item.isSpecs == 1 && item.isUnits == 2) {
						//先循环自由项名称数组
						item.specses = item.specses.map((it, inx) => {
							//循环多自由项sku数组 取出里面对应的项
							let a = item.skuInfo.map(ite => {
								return ite.specsOptionInfo[inx]
							})
							//去重
							const map = new Map();
							const newArr = a.filter(v => !map.has(v.optionName) && map.set(v.optionName, 1));


							// 放到自由项名称数组里 
							return {
								...it,
								cses: newArr,
								specsesActive: 0
							}
						})
						if (item.specses && item.specses.length) {
							let f1 = item.skuInfo.map(v => {
								v.specsOptionInfo[0]['name'] = item.specses.length == 2 ? v.specsOptionInfo[0]
									.optionName + '-' + v.specsOptionInfo[1].optionName : v.specsOptionInfo[0]
									.optionName;
								return v.specsOptionInfo[0];
							});
							let result = new Map();
							f1 = f1.filter(v => !result.has(v.optionName) && result.set(v.optionName, 1))
							for (let i = 0; i < f1.length; i++) {
								for (let j = 0; j < f1.length; j++) {
									if (f1[i].optionName == f1[j].optionName && i != j) {
										f1.splice(j, 1);
									}
								}
							}
							let f2 = ``;
							if (item.specses.length == 2) {
								f2 = item.skuInfo.map(v => {
									v.specsOptionInfo[1]['name'] = item.specses.length == 2 ? v
										.specsOptionInfo[0].optionName + '-' + v.specsOptionInfo[1]
										.optionName : '';
									return v.specsOptionInfo[1];
								});
								let result1 = new Map();
								f2 = f2.filter(v => !result1.has(v.optionName) && result1.set(v.optionName, 1))

								for (let i = 0; i < f2.length; i++) {
									for (let j = 0; j < f2.length; j++) {
										if (f2[i].optionName == f2[j].optionName && i != j) {
											f2.splice(j, 1);
										}
									}
								}
							}



							let all = item.skuInfo.map(v => {
								return item.specses.length == 2 ? v.specsOptionInfo[0].optionName + '-' + v
									.specsOptionInfo[1].optionName : v.specsOptionInfo[0].optionName;
							})
						
							item.specses[0]['list'] = f1.map(v => ({
								currentObj: ({
									...v,
									checked: false
								}),
								all,
								name: v.name
							}));
							if (item.specses.length == 2) {
								item.specses[1]['list'] = item.specses.length == 2 ? f2.map(v => ({
									currentObj: ({
										...v,
										checked: false
									}),
									all,
									name: v.name
								})) : [];
								
							}

						}
					}
					this.commonityItem = item;
					this.$refs.addCardPopup.showPopup = true //弹出层选sku
					uni.hideTabBar({});
					// this.$nextTick(() => {
					// 	if(item.isSpecs == 1 && item.isUnits == 2){
					// 		this.$refs.addCardPopup.firstFree = item.specses[0] && 
					// 		item.specses[0].list && 
					// 		item.specses[0].list.length && 
					// 		item.specses[0].list[0] &&
					// 		item.specses[0].list[0].name &&
					// 		item.specses[0].list[0].name.split('-')[0]
					// 	}

					// })
					
				} else { //不是自由项商品 直接添加购物车
					//添加购物车之前 做价格校验
					// if(item?.defaultSKU?.skuPriceInfo?.[0]?.price == 0){
					// 	this.Utils.toast(`当前商品暂无价格，无法添加购物车`)
					// 	return
					// }
					console.log(item.defaultSKU.stockNum);
					if (item.defaultSKU.stockNum <= 0) {
						this.Utils.toast(`暂无库存`);
						return;
					}
					this.addCard(item)
					
					
				}


			},
			// 获取购物车数量
			async getCatToally(){
				const {data} = await getCatCount({
					type:1
				})
			
				uni.setTabBarBadge({
				  index: 2,
				  text: data.info.toString()
				})
				
			},
			//添加购物车
			async addCard(item) {
				
				// if(!item?.defaultSKU?.skuPriceInfo?.[0]?.price){
				// 	this.Utils.toast(`当前商品暂无价格，无法添加购物车`);
				// 	return;
				// }
				let res = await addMallShoppingCart({
					type: 1, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
					commodityId: item.commodityId || '', //商品SPUid
					commodityDetailId: item?.defaultSKU?.detailId || '', //商品SKUid
					qty: 1,
					price:item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price || 0,
					money: this.Utils.formatToFixed(item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price * 1 || 0,
						'money') || 0,
					summary: '',
				})
				if (res.code == 2000) {
					this.Utils.toast('已加入购物车')
					
					setTimeout(() => {
						this.$emit('publish');
						this.resetList()
						this.getCatToally()
						
					}, 200)
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//关闭绑定手机号弹出
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			},
			//手机号弹窗框确认
			bindingPhoneNumberSave() {
				//关闭弹窗
				this.bindingPhoneNumberShow = false
			},
		}
	}
</script>

<style lang="scss">
	.gwc {
		position: relative;
		
	} 
	.jiaobiao {
				position: absolute;
				 right: -18rpx;
				 top: -20rpx;
				 color: red;
				background-color: $bg_activity_color;
				    color: white;
				    width: 32rpx;
				    height: 32rpx;
				    border-radius: 16rpx;
				    text-align: center;
				    line-height: 32rpx;
				    font-size: 24rpx;
				}
			
	.like {
		width: 100%;
		// height: 100px;
		border: 1px solid #f3f3f3;
		background-color: rgba(255, 255, 255, 1);
		border-radius: $border_radius_6;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
		box-sizing: border-box;

		.like_title {
			font-size: $font_size_14;
			color: $text_color_333;
			overflow: hidden;
			min-height: 20rpx;
		}

		.like_cangku {
			font-size: $font_size_12;
			color: $text_color_808080;
			display: flex;
			flex-direction: column;
		}

		.like_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 28rpx;
		}

		.like_price {
			font-weight: bold;
			font-size: 32rpx;
			color: $text_color_ec4141;
			overflow: hidden;
			display: block;
		}

		.like_unit {
			color: $text_color_808080;
			font-size: $font_size_12;
		}

		.like_yishou {
			color: $text_color_808080;
			font-size: $font_size_12;
			overflow: hidden;
			display: block;
		}

		image {
			border-radius: $border_radius_4;
		}
	}

	.one_like {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		width: 100%;
		border: 1px solid #f3f3f3;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
		box-sizing: border-box;

		.one_like_leftImg {
			width: 180rpx;
			height: 180rpx;
			flex: none;
		}

		.one_like_right {
			flex: auto;

			.like_title {
				color: $text_color_333;
				font-size: $font_size_14;
				min-height: 10rpx;
			}

			.like_cangku {
				font-size: $font_size_12;
				color: $text_color_808080;

			}

			.like_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

			}

			.like_price {
				font-weight: bold;
				font-size: 32rpx;
				color: $text_color_ec4141;
				overflow: hidden;
				display: block;
			}

			.like_unit {
				color: $text_color_808080;
				font-size: $font_size_12;
			}

			.like_yishou {
				color: $text_color_808080;
				font-size: $font_size_12;
				overflow: hidden;
				display: block;
			}

			image {
				border-radius: $border_radius_4;
			}
		}

	}

	// .select_item{
	// 	width: 100%;
	// 	height: 65vh;
	// 	box-sizing: border-box;
	// 	.select_item_top{
	// 		width: 100%;
	// 		height: 168rpx;
	// 		display: flex;
	// 		.select_item_top_l{
	// 			width: 200rpx;
	// 			height: 200rpx;
	// 			position: relative;
	// 			image{
	// 				width: 100%;
	// 				height: 100%;
	// 				position: absolute;
	// 				top: -30rpx;
	// 				left: 0;
	// 			}
	// 		}
	// 		.select_item_top_c{
	// 			flex: 1;
	// 			margin: 0 20rpx;
	// 			.select_item_top_c_t{
	// 				color: $text_color_333;
	// 				font-size: $font_size_14;
	// 			}
	// 			.select_item_top_c_b{
	// 				color: $text_color_808080;
	// 				font-size: $font_size_12;
	// 				.money{
	// 					color: $text_color_ec4141;
	// 				}
	// 			}
	// 		}
	// 		.select_item_top_r{
	// 			width: 40rpx;
	// 			height: 40rpx;
	// 			image{
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}
	// 	}
	// 	.select_item_list{
	// 		overflow-y: auto;
	// 		height: calc(65vh - 168rpx - 100rpx - 150rpx);
	// 		.select_item_unit{
	// 			width: 100%;
	// 			height: 80rpx;
	// 			display: flex;
	// 			overflow-x: auto;
	// 			line-height: 80rpx;
	// 			border-bottom: 1px solid #f3f3f3;
	// 			.select_item_unit_item{
	// 				min-width: 160rpx;
	// 				width: 160rpx;
	// 				height: 100%;
	// 				text-align: center;
	// 				box-sizing: border-box;
	// 			}
	// 			.select_item_unit_item_active{
	// 				border-bottom: 2px solid #ec4141!important;
	// 				color: #ec4141;
	// 			}
	// 		}
	// 		.select_item_options{
	// 			width: 100%;
	// 			box-sizing: border-box;
	// 			padding: 20rpx 0;
	// 			.select_item_options_title{
	// 				font-size: 32rpx;
	// 				color: $text_color_333;
	// 			}
	// 			.select_item_options_item{
	// 				display: flex;
	// 				flex-wrap: wrap;
	// 				gap: 10rpx;
	// 				.select_item_options_item_l{
	// 					width: 110rpx;
	// 					height: 64rpx;
	// 					border-radius: $border_radius_4;
	// 					background-color: #f3f3f3;
	// 					font-size: $font_size_14;
	// 					color: $text_color_333;
	// 					text-align: center;
	// 					line-height: 64rpx;
	// 					margin-right: 20rpx;
	// 				}
	// 				.select_item_options_item_l_active{
	// 					color: #FFF!important;
	// 					background-color: #ec4141!important;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.select_item_num{
	// 		width: 100%;
	// 		height: 100rpx;
	// 		border-top: 1px solid #f3f3f3;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		.select_item_num_l{
	// 			font-size: 32rpx;
	// 			color: #333;
	// 			text{
	// 				font-size: $font_size_14;
	// 			}
	// 		}
	// 	}
	// }

	// .minus {
	// 		width: 22px;
	// 		height: 22px;
	// 		border-width: 1px;
	// 		border-color: #E6E6E6;
	// 		border-style: solid;
	// 		border-top-left-radius: 100px;
	// 		border-top-right-radius: 100px;
	// 		border-bottom-left-radius: 100px;
	// 		border-bottom-right-radius: 100px;
	// 		@include flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 	}

	// 	.input {
	// 		padding: 0 10px;
	// 	}

	// 	.plus {
	// 		width: 22px;
	// 		height: 22px;
	// 		background-color: #FF0000;
	// 		border-radius: 50%;
	// 		/* #ifndef APP-NVUE */
	// 		display: flex;
	// 		/* #endif */
	// 		justify-content: center;
	// 		align-items: center;
	// 	}
</style>